<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<script src="../js/jquery-2.1.1.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
		<script src="../js/ajax.js"></script>
		<script src="../js/admin/teacher-manager-vue.js"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/common.js"></script>
		

		<style>
			body{
				padding: 20px;
				background-color: white;

			}

		</style>
	</head>
	<body>
		
		<!--tableDiv表格模块开始-->
		<div id="tableDiv" class="container" >
			
			<!--新增的模块框开始-->
			<div id="addDiv">
				
				<!-- 新增的模块框开始 -->
				<!-- Modal -->
				<div class="modal fade" id="add-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				  <div class="modal-dialog" role="document">
					
					  
				    <div class="modal-content">
				     <!-- <div v-show="add" class="modal-header">
				        <button v-on:click="addCall" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				        <h4 class="modal-title" id="myModalLabel">增加</h4>
				      </div> -->
					  <div v-show="update" class="modal-header">
					    <button v-on:click="updateCall" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					    <h4 class="modal-title" id="myModalLabel">修改</h4>
					  </div>
				      <div class="modal-body">
				
							<!-- 角色新增的表单 开始 -->
							<form class="form-horizontal">
								
							 <div v-if="update" class="form-group">
							   <label for="updateTeacherId" class="col-sm-2 control-label">#</label>
							   <div class="col-sm-10">
								  <p class="form-control-static" name="updateTeacherId">{{teacherId}}</p>
								  <input type="hidden" v-model="teacherId"  />
							   </div>
							 </div>
								 
								 
							  <!-- 此处需要改成你的逻辑 -->	 
							  
							  <div class="form-group">
							    <label for="name" class="col-sm-2 control-label">姓名</label>
							    <div class="col-sm-10">
							      <input type="text" class="form-control" id="name" v-model="name" placeholder="老师名称">
							    </div>
							  </div>
							  <div class="form-group">
							    <label for="teacherSalary" class="col-sm-2 control-label">工资</label>
							    <div class="col-sm-10">
							      <input type="text" class="form-control" id="teacherSalary" v-model="teacherSalary" placeholder="工资">
							    </div>
							  </div>
							  <div class="form-group">
							    <label for="hireDate" class="col-sm-2 control-label">录用时间</label>
							    <div class="col-sm-10">
							      <input type="date" class="form-control" id="hireDate" v-model="hireDate" placeholder="录用时间">
							    </div>
							  </div>
							  <!-- <div class="form-group">
							    <label for="teacherId" class="col-sm-2 control-label">老师ID</label>
							    <div class="col-sm-10">
							      <input type="text" class="form-control" id="teacherId" v-model="teacherId" name="teacherId" placeholder="老师ID">
							    </div>
							  </div> -->
							  <div class="form-group">
							    <label for="phone" class="col-sm-2 control-label">电话</label>
							    <div class="col-sm-10">
							      <input type="text" class="form-control" id="phone" v-model="phone" placeholder="电话">
							    </div>
							  </div>
							  <!-- <div class="form-group">
							    <label for="clazzName" class="col-sm-2 control-label">班级</label>
							    <div class="col-sm-10">
							      <input type="text" class="form-control" id="clazzName" v-model="clazzName" placeholder="班级">
							    </div>
							  </div> -->
							  
							  
							  <!-- 此处需要改成你的逻辑 -->
							</form>
							<!-- 角色新增的表单 结束 -->
				
				      </div>
				      <div class="modal-footer">
				        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				        <!-- <button v-if="add"    type="button"  v-on:click="addCall" class="btn btn-primary">增加</button> -->
						<button v-if="update" type="button"  v-on:click="updateCall" class="btn btn-primary">修改</button>
				      </div>
				    </div>
				  </div>
				</div>
				<!-- 新增的模态框结束 -->
				
			</div>
			<!--新增的模块框结束-->
			
			
			
			<!-- 路径导航开始-->
			<div class="row">
				<div class="col-md-12">
					<!-- 此处需要改成你的逻辑 -->
					<ol class="breadcrumb">
					  <li><a style="text-decoration: none;" href="#">老师模块</a></li>
					  <li><a style="text-decoration: none;" href="#">老师管理</a></li>
					</ol>
					<!-- 此处需要改成你的逻辑 -->
				</div>
			</div>
			<!-- 路径导航结束-->
			
			<!-- 按钮开始-->
			<div class="row">
				<div class="col-md-4">
					<!-- <button v-on:click="openAddModal" class="btn btn-primary">增加</button> -->
					<!-- <button v-on:click="deleteCall" class="btn btn-danger">删除</button> -->
				</div>
			</div>
			<!-- 按钮结束-->
			
			<!-- 表格开始-->
			<div class="row">
				<div class="col-md-12">
					<table class="table table-hover" id="teacherListTable">
						<tr>
							<!-- <th><input  id="selectAll" type="checkbox"></th> -->
							
							<!-- 此处需要改成你的逻辑 -->
							<th>ID</th>
							<th>姓名</th>
							<th>工资</th>
							<th>录用时间</th>
							<th>电话</th>
							<!-- <th>班级</th> -->
							<!-- 此处需要改成你的逻辑 -->
							
							<th>操作</th>
							<!-- <th>分配</th> -->
						</tr>
						<tr v-for="bean,index in beans">
							<!-- <td><input class="check-item" type="checkbox" v-bind:value="bean.id"></td> -->
							
							<!-- 此处需要改成你的逻辑 -->
							<td>{{bean.teacherId}}</td>
							<td>{{bean.name}}</td>
							<td>{{bean.teacherSalary}}</td>
							<td>{{bean.hireDate}}</td>
							<td>{{bean.phone}}</td>
							<!-- <td>{{bean.clazzName}}</td> -->
							<!-- 此处需要改成你的逻辑 -->
							
							<td>
								<button @click="openUpdateModel(index)" class="btn btn-primary btn-sm">
									<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
								</button>
							</td>
							<!-- <td>
								<button @click="UpdateModel(index)" class="btn btn-primary btn-sm">
									<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>分配班级
								</button>
							</td> -->
						</tr>
						
						<!--分页组件开始-->
						<tr style="background-color: white;">
							<td colspan="2">
								<span class="glyphicon glyphicon-flag"></span>
								第
								<span class="pageNumber">{{pageNumber}}</span>
								页 
								&nbsp;
								<span class="glyphicon glyphicon-align-justify"></span>
								每页
								<span class="totalPage">{{pageSize}}</span>
								条
								&nbsp; 
								<span class="glyphicon glyphicon-check"></span>
								总记录
								<span class="totalCounter">{{totalCounter}}</span>
								条
								&nbsp;
								<span class="glyphicon glyphicon-briefcase"></span>
								共
								<span class="totalPage">{{totalPage}}</span>
								页
							</td>
							<td colspan="4">
								<!-- 分页按钮开始 -->
								<nav aria-label="Page navigation">
								  <ul class="pagination">
									
									<!-- 第1页 -->
									<li id="firstPage" v-on:click="firstPage"><a href="#">&lt;&lt;</a></li>  
									
									<!-- 上1页 -->
								    <li id="prePage" v-on:click="prePage"><a href="#">&lt;</a></li>
									
									<!-- 下1页 -->
								    <li id="nextPage" v-on:click="nextPage"><a href="#">&gt;</a></li>
									
									<!-- 最后1页 -->
									<li id="lastPage" v-on:click="lastPage"><a href="#">&gt;&gt;</a></li> 
								  </ul>
								</nav>
								<!-- 分页按钮开始 -->
							</td>
						</tr>
						<!--分页组件结束-->
						
					</table>
				</div>
			</div>
			<!-- 表格结束-->
			
			
		</div>
		<!--tableDiv表格模块结束-->
	</body>
	
	
</html>
